<template>
    <div class="memberinfo-layout">
        <div class="info-back search-part">
            <el-row :gutter="20">
                <el-col :span="12">
                    <div class="back-icon" @click="back()">
                        <i class="fa fa-arrow-left" aria-hidden="true"></i>
                    </div>
                </el-col>
                <el-col :span="10" class="btns">
                    <el-button type="primary" class="save red-btn" @click="submitForm('addForm')">保存</el-button>
                    <!-- <el-button type="primary" class="save red-btn" @click="onSubmit">
                        保存
                    </el-button> -->
                </el-col>
            </el-row>
        </div>
        <div class="info-form">
            <el-form :model="addForm" :rules="addFormRules" ref="addForm" label-width="100px">
                <el-form-item label="课程名称:" prop="name"
                              :rules="[
                      {
                          required: true,
                          message: '请输入商品名称',
                          trigger: 'change'
                      }
                    ]">
                    <el-input v-model="addForm.name"></el-input>
                </el-form-item>
                <el-form-item
                        label="编码:"
                        prop="code"
                >
                    <el-input v-model="addForm.code"></el-input>
                </el-form-item>
                <el-form-item label="单价:" prop="price"
                              :rules="[
                  {
                      required: true,
                      pattern: /^\-?[0-9]*\.?[0-9]+$/,
                      message: '请输入商品单价',
                      trigger: 'change'
                  }
                ]">
                    <el-input v-model="addForm.price"></el-input>
                </el-form-item>
                <el-form-item label="计量单位:" prop="unit"
                              :rules="[
                  {
                      required: true,
                      message: '请输入商品计量单位',
                      trigger: 'change'
                  }
                ]">
                    <el-input v-model="addForm.unit"></el-input>
                </el-form-item>
                <el-form-item label="积分单价:" prop="score">
                    <el-input v-model="addForm.score"></el-input>
                </el-form-item>
                <el-form-item label="提成金额:" prop="prize"
                              :rules="[
                  {
                      required: true,
                      pattern: /^\-?[0-9]*\.?[0-9]+$/,
                      message: '请输入商品提成金额',
                      trigger: 'change'
                  }
                ]">
                    <el-input v-model="addForm.prize"></el-input>
                </el-form-item>
                <el-form-item label="商品类型:">
                    <div class="el-left">
                        <el-select v-model="value2" placeholder="商品" style="width: 100px;" class="goodstype-input">
                            <el-option
                                    style="width: 100px;"
                                    v-for="item in options2"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                    </div>

                </el-form-item>
                <el-form-item label="标签:" prop="tagNames" class="member-tag">
                    <!--<el-input v-show="closeInput"></el-input>-->
                    <div class="bd-gooods">
                        <div class="tag-tit">
                            <el-tag
                                    :key="tag"
                                    v-for="tag in dynamicTags"
                                    :closable="true"
                                    :close-transition="false"
                                    @close="handleClose(tag)"
                            >
                                {{tag}}

                            </el-tag>
                            <el-input
                                    class="input-new-tag"
                                    v-if="inputVisible"
                                    v-model="inputValue"
                                    ref="saveTagInput"
                                    @keyup.enter.native="handleInputConfirm"
                                    @blur="handleInputConfirm"
                            >
                            </el-input>
                            <el-button v-else class="button-new-tag" size="small" @click="showInput">+ 标签

                            </el-button>
                        </div>
                    </div>

                </el-form-item>
                <!--<el-form-item label="标签:" prop="tagNames" class="member-tag">-->
                <!--&lt;!&ndash;<el-input v-show="closeInput"></el-input>&ndash;&gt;-->
                <!--<div class="bd-gooods">-->
                <!--<div class="tag-tit">-->
                <!--<el-tag-->
                <!--:key="tag"-->
                <!--v-for="tag in dynamicTags"-->
                <!--:closable="true"-->
                <!--:close-transition="false"-->
                <!--@close="handleClose(tag)"-->
                <!--&gt;-->
                <!--{{tag}}-->

                <!--</el-tag>-->

                <!--<el-input-->
                <!--class="input-new-tag"-->
                <!--v-if="inputVisible"-->
                <!--v-model="inputValue"-->
                <!--ref="saveTagInput"-->
                <!--@keyup.enter.native="handleInputConfirm"-->
                <!--@blur="handleInputConfirm"-->
                <!--&gt;-->
                <!--</el-input>-->
                <!--<el-button v-else class="button-new-tag" size="small" @click="showInput">+ New Tag</el-button>-->
                <!--</div>-->
                <!--</div>-->

                <!--</el-form-item>-->
                <el-form-item label="状态" prop="state">
                    <div class="el-left">
                        <el-switch on-text="启用"
                                   off-text=""
                                   v-model="status"
                                   on-color="#13ce66"
                                   off-color="#cacaca"
                        ></el-switch>
                    </div>
                </el-form-item>
                <el-form-item label="备注:" prop="remark" class="member-mark">
                    <el-input type="textarea" v-model="addForm.remark"></el-input>
                </el-form-item>
                <el-form-item label="上传图片:" prop="upload" class="member-upload">
                    <div class="el-left">
                        <el-upload
                                class="avatar-uploader"
                                :action="uploadUrl"
                                :show-file-list="false"
                                :on-success="handleAvatarSuccess"
                                :before-upload="beforeAvatarUpload"
                                :on-error="onError">

                            <img v-if="imageUrl" :src="imageUrl" class="avatar" v-model="uploadUrl">
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                        </el-upload>
                    </div>
                </el-form-item>
                <!--<el-form-item>-->
                <!--<el-button @click="sendContend">Send</el-button>-->
                <!--</el-form-item>-->
            </el-form>
        </div>
    </div>

</template>

<script>
    import * as type from '../../../store/types';
    export default {
        data: function () {
            return {
                ws: '',
                options2: [{
                    value: '10',
                    label: '商品'
                }, {
                    value: '20',
                    label: '服务'
                }],
                value2: '10',
                dynamicTags: [],
                inputVisible: false,
                inputValue: '',
                addForm: {},
                imageUrl: '',
                uploadUrl: this.$cfg.api_url + "/vue-uploads",
                closeInput: true,
                addFormRules: {
                    name: [
                        {required: true, message: '请输入商品名称', trigger: 'change'}

                    ],
                    price: [
                        {required: true, message: '请输入单价', trigger: 'change'},
                        {type: 'number', message: '单价为数字值'}
                    ],
                    unit: [
                        {required: true, message: '请输入计量单位', trigger: 'change'},
                        {type: 'number', message: '计量单位为数字值'}
                    ],
                    prize: [
                        {required: true, message: '请输入提成金额', trigger: 'change'},
                        {type: 'number', message: '提成金额为数字值'}
                    ]
                },
                status: true,
                state: ''
            }
        },
        activated: function () {
            this.$$("#content").scrollTop(0)
            let self = this;
            if (this.$route.query.item) {
                console.log(self.$route.query.item)
                self.addForm = self.$route.query.item;
                if (self.addForm.tagNames) {
                    self.dynamicTags = self.addForm.tagNames.split(',');
                } else {
                    this.dynamicTags = []
                }
                self.imageUrl = self.$cfg.static_url + "/" + self.addForm.pictureName
                if (self.addForm.kindCode == 10) {
                    self.value2 = '10'
                }
                if (self.addForm.kindCode == 20) {
                    self.value2 = '20'
                }
                if (self.addForm.state) {
                    self.status = true
                } else {
                    self.status = false
                }
            }
            if (this.$route.query.new) {
                console.log(this.$route.query.new)
                this.addForm = {
                    name:'',
                    code:'',
                    price:'',
                    unit:'',
                    score:'',
                    remark:'',
                    prize: 0
                };
                this.dynamicTags = [];
                this.imageUrl = '';
                this.value2 ="10"
            }
        },
        methods: {

//            sendContend: function () {
//                var content = this.addForm.remark;
//                if (content == "") {
//                    alert("不能发送空内容");
//                }
//
//                var toName = "all";
//                //  console.log(toName)
//                this.$ws.send(toName + "&&" + content);
//                console.log("我说:" + content);
//
//            },
            handleAvatarSuccess(res, file) {
                let self = this;
                this.imageUrl = URL.createObjectURL(file.raw);
                if (res) {
                    self.addForm.pictureId = res[0].id;
                }

            },
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            },
            onError: function (err, file, fileList) {
                alert(err)
            },
            back: function () {
                this.$store.commit(type.CHANGE_INDEX, '/goods/service');
                this.$router.push('/goods/service');
            },
            submitForm(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        let self = this;
                        let args = this.addForm;
                        if (this.status) {
                            args.state = 1;
                        } else {
                            args.state = 0;
                        }
                        args.kindCode = this.value2;
                        if (this.dynamicTags.length) {
                            args.tagNames = self.dynamicTags.join(',');
                        } else {
                            args.tagNames = ''
                        }
                        console.log(args)
                        this.$axioxs.post("/goods/", args)
                            .then(function (res) {
                                    self.back();
                                },
                                (res) => {
                                    this.$message({
                                        showClose: true,
                                        type: 'error',
                                        message: res
                                    });
                                });
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            handleClose(tag) {
                this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
            },

            showInput() {
                this.closeInput = false;
                this.inputVisible = true;
                this.$nextTick(_ => {
                    this.$refs.saveTagInput.$refs.input.focus();
                });
            },

            handleInputConfirm() {
                let inputValue = this.inputValue;
                if (inputValue) {
                    this.dynamicTags.push(inputValue);
                }
                this.inputVisible = false;
                this.inputValue = '';
                this.closeInput = true;
            }
        }

    }
</script>
<style scoped>
    .memberinfo-tit {
        box-shadow: none !important;
    }

    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }

    .avatar-uploader .el-upload:hover {
        border-color: #20a0ff;
    }

    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }

    .avatar {
        width: 178px;
        height: 178px;
        display: block;
    }


</style>
